<%--
  Created by IntelliJ IDEA.
  User: dhf
  Date: 2019/11/27
  Time: 9:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>淘美美-医院管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../static/lib/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../static/css/admin.css" media="all" />
    <style>
        .layui-table-cell{
            height: 100%;
        }
    </style>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item"></div>
        </div>

        <div class="layui-card-body">
            <table class="layui-hide" id="dataTables" lay-filter="dataTables"></table>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
<%--    <div class="layui-btn-container">--%>
<%--        <button class="layui-btn layui-btn-sm" lay-event="add">添加产品</button>--%>
<%--    </div>--%>
</script>
<script type="text/html" id="promoteBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
    {{#  if(d.status == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="up">上线</a>
    {{# } else { }}
    <a class="layui-btn layui-btn-xs" lay-event="down">下线</a>
    {{#  } }}
    {{#  if(d.placeId > 7){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#  } }}
</script>
<script src="../../static/lib/layui/layui.js"></script>
<script src="../../static/js/jquery.min.js"></script>

<script>
    layui
        .config({
            base: "../../static/js/"
        })
        .extend({
            index: "index"
        })
        .use(["index", "table","laydate"], function (){
        var table = layui.table,form = layui.form;
        //监听搜索
        form.on('submit(LAY-user-front-search)', function(data){
            var field = data.field;

            //执行重载
            table.reload('dataTables', {
                where: field
            });
        });
        //第一个实例
        table.render({
            elem: '#dataTables'
            ,url: '${path}/promote/getList/' //数据接口
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '医院列表'
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 5 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页
                ,theme:'#39aef5'
                ,limit:20
            }
            ,cols: [[ //表头
                {field: 'placeId', title: '位置ID', width:120}
                ,{field: 'name', title: '产品集', width:120}
                ,{field: 'placeId', title: '位置', width:120,templet:function (d) {
                        switch (d.placeId){
                            case 1:
                                return "精选";
                            case 2:
                                return "首页icon";
                            case 3:
                                return "首页icon";
                            case 4:
                                return "首页icon";
                            case 5:
                                return "首页icon";
                            case 6:
                                return "商品详情页";
                            case 7:
                                return "严选首页";
                            default:
                                return "暂定";
                        }
                    }}
                ,{field: 'pic', title: '产品集图片', width:120,templet: function(res){
                        return "<a lay-event=\"previewImg\"><img src='"+res.pic+"' style='width: 40px;height: 40px;' /></a>"
                    }}
                ,{field: 'time', title: '时间', width:300,templet:function (res) {
                        var html = '<div>';
                        html += '开始时间：' + res.start.substring(0,19);
                        html += '<br>';
                        html += '到期时间：' + res.over.substring(0,19);
                        html += '</div>';
                        return html;
                    }}
                ,{field: 'count', title: '点击次数', width:100}
                ,{field: 'id', title: '操作', width: 200,toolbar:'#promoteBar'}
            ]]
        });
        //头工具栏事件
        table.on('toolbar(dataTables)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2
                        ,title: "修改产品集"
                        ,area: ['1200', '700px']
                        ,content: '${path}/promote/add'
                        ,maxmin: true
                        ,btn: ['确定', '取消']
                        ,yes: function(index, layero){
                            var iframeWindow = window['layui-layer-iframe'+ index]
                                ,submitID = 'LAY-user-front-submit'
                                ,submit = layero.find('iframe').contents().find('#'+ submitID);

                            //监听提交
                            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                                var field = data.field; //获取提交的字段
                                var pic = field.pic;
                                var promoteGoods = field.promoteGoods;
                                if(pic == null || pic == ''){
                                    layer.alert("请上传产品集图", {icon: 2});
                                    return false;
                                }
                                if(promoteGoods == null || promoteGoods == ''){
                                    layer.alert("请选择关联产品", {icon: 2});
                                    return false;
                                }
                                var index = layer.load(2);
                                $.ajax({
                                    type:"post",
                                    url:'/promote/insert',
                                    dataType:"json",
                                    data:field,
                                    success:function(data){
                                        layer.close(index);
                                        if(data.code ==0){
                                            layer.alert(data.msg,{icon:1}, function(){
                                                window.location.href = window.location.href;
                                            });
                                        }else{
                                            layer.alert(data.msg,{icon:2});
                                        }
                                    },
                                    error:function (data) {
                                        layer.close(index);
                                    }
                                });
                            });
                            submit.trigger('click');
                        }
                    });
                    return;
            }
        });

        //监听行工具事件
        table.on('tool(dataTables)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                layer.open({
                    type: 2
                    ,title: "修改产品集"
                    ,area: ['1200', '700px']
                    ,content: '${path}/promote/edit?id='+data.id
                    ,maxmin: true
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                        var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submitID = 'LAY-user-front-submit'
                            ,submit = layero.find('iframe').contents().find('#'+ submitID);

                        //监听提交
                        iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                            var field = data.field; //获取提交的字段
                            //提交 Ajax 成功后，静态更新表格中的数据
                            var pic = field.pic;
                            var promoteGoods = field.promoteGoods;
                            if(pic == null || pic == ''){
                                layer.alert("请上传产品集图", {icon: 2});
                                return false;
                            }
                            if(promoteGoods == null || promoteGoods == ''){
                                layer.alert("请选择关联产品", {icon: 2});
                                return false;
                            }
                            $.ajax({
                                type:"post",
                                url:"/promote/insert",
                                dataType:"json",
                                data:field,
                                success:function(data) {
                                    if (data.code == 0) {
                                        layer.alert(data.msg,{
                                                icon: 1,
                                                skin: 'layer-ext-moon', //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                                                btn: ['确定']
                                            }, function() {
                                                layer.close(index); //关闭弹层
                                                window.location.href = window.location.href;
                                            }//数据刷新
                                        );

                                    }else{
                                        layer.alert(data.msg, {
                                            icon: 2,
                                            skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                                        })
                                    }
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
            }
            if(obj.event === 'del') {
                layer.confirm('确认是否上线该产品集', {
                    btn: ['确定', '取消']
                }, function () {
                    shelf(data.id, 2);
                });
                if (obj.event === 'del') {
                    layer.confirm('确认是否下线该产品集', {
                        btn: ['确定', '取消']
                    }, function () {
                        shelf(data.id, 1);
                    });
                }
            }
            if(obj.event === 'del') {
                layer.confirm('确认是否删除该产品集', {
                    btn: ['确定', '取消']
                }, function () {
                    del(data.id);
                });
            }else if(obj.event === 'previewImg'){
                var icon = data.pic;
                var img = new Image();
                img.src = icon;
                var height = img.height + 50; //获取图片高度
                var width = img.width; //获取图片宽度
                var imgHtml = "<img src='" + icon + "' />";
                //弹出层
                layer.open({
                    type: 1,
                    shade: 0.8,
                    offset: 'auto',
                    area: [width + 'px', height + 'px'],
                    shadeClose: true,//点击外围关闭弹窗
                    scrollbar: false,//不现实滚动条
                    title: "图片预览", //不显示标题
                    content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                    cancel: function () {
                        //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                    }
                });
            }
        });
        function shelf(id,status) {
            $.ajax({
                type: "post",
                url: "${path}/promote/shelf",
                dataType: "json",
                data: {"id":id,status:status},
                success: function (data) {
                    if(data.code != 0){
                        layer.msg(data.msg, {
                            offset: '200px'
                            ,icon: 2
                            ,time: 1000
                            ,anim:4
                        }, function(){});
                        return;
                    }
                    layer.msg(data.msg, {
                        offset: '200px'
                        ,icon: 1
                        ,time: 1000
                    }, function(){
                        var field = data.field;
                        //执行重载
                        table.reload('dataTables', {
                            where: field
                        });
                    });
                }
            });
        }
        function del(id) {
            $.ajax({
                type: "post",
                url: "${path}/promote/delete",
                dataType: "json",
                data: {"id":id},
                success: function (data) {
                    if(data.code != 0){
                        layer.msg(data.msg, {
                            offset: '200px'
                            ,icon: 2
                            ,time: 1000
                            ,anim:4
                        }, function(){});
                        return;
                    }
                    layer.msg(data.msg, {
                        offset: '200px'
                        ,icon: 1
                        ,time: 1000
                    }, function(){
                        var field = data.field;
                        //执行重载
                        table.reload('dataTables', {
                            where: field
                        });
                    });
                }
            });
        }
    });
</script>
</body>
</html>

